<template>
<!-- 夕会看板 -->
  <div class="morning-container">
    <div class="morning-btn">
      <div class="btn-time">截止数据周期：{{ info.INSERT_DATE || '' }}</div>
    </div>
    <!-- 发展 -->
    <board-title title="发展" bgclass="bg-fz">
      <img slot="flagImg" class="flag-img" src="~@/assets/imgs/publicline/board/flag_fz.png" />
    </board-title>
    <div class="board-info fz">
      <div class="board-item" @click="openPeopleDetail('YW', info.GSM_VALUE, info.MB_GSM_VALUE)">
        <div>移网</div>
        <div class="sub-title">今日发展/今日目标</div>
        <div class="value">{{ info.GSM_VALUE || 0 }}/{{ info.MB_GSM_VALUE || 0}}<span class="unit">户</span></div>
      </div>
      <div class="board-item" @click="openPeopleDetail('KD', info.KD_VALUE, info.MB_KD_VALUE)">
        <div>宽带</div>
        <div class="sub-title">今日发展/今日目标</div>
        <div class="value">{{ info.KD_VALUE || 0 }}/{{ info.MB_KD_VALUE || 0}}<span class="unit">户</span></div>
      </div>
      <div class="board-item" @click="openPeopleDetail('RH', info.RH_VALUE, info.MB_RH_VALUE)">
        <div>融合</div>
        <div class="sub-title">今日发展/今日目标</div>
        <div class="value">{{ info.RH_VALUE || 0 }}/{{ info.MB_RH_VALUE || 0}}<span class="unit">户</span></div>
      </div>
      <div class="board-item" @click="openPeopleDetail('YQT_XH', info.YQT_VALUE, info.MB_YQT_VALUE)">
        <div>云企通</div>
        <div class="sub-title">今日发展/今日目标</div>
        <div class="value">{{ info.YQT_VALUE || 0 }}/{{ info.MB_YQT_VALUE || 0}}<span class="unit">户</span></div>
      </div>
    </div>
    <!-- 维系 -->
    <board-title title="维系" bgclass="bg-wx">
      <img slot="flagImg" class="flag-img" src="~@/assets/imgs/publicline/board/flag_wx.png" />
    </board-title>
    <div class="board-info wx">
      <div class="board-item" @click="openPeopleDetail('5GQZ', info.QZ_5G_VALUE, '')">
        <div>5G迁转</div>
        <div class="value">{{ info.QZ_5G_VALUE || 0}}<span class="unit">户</span></div>
      </div>
      <div class="board-item" @click="openPeopleDetail('5GTSB', info.SJB_5G_VALUE, '')">
        <div>5G升级包</div>
        <div class="value">{{ info.SJB_5G_VALUE || 0}}<span class="unit">户</span></div>
      </div>
      <div class="board-item" @click="openPeopleDetail('KDTSB', info.KDTSB_VALUE, '')">
        <div>宽带提速包</div>
        <div class="value">{{ info.KDTSB_VALUE || 0}}<span class="unit">户</span></div>
      </div>
    </div>
    <!-- 智家 -->
    <board-title title="智家" bgclass="bg-zj">
      <img slot="flagImg" class="flag-img" src="~@/assets/imgs/publicline/board/flag_zj.png" />
    </board-title>
    <div class="board-info zj">
      <div class="board-item" @click="openPeopleDetail('WJGH', info.WJGH_VALUE, '')">
        <div>沃家固话</div>
        <div class="value">{{ info.WJGH_VALUE || 0}}<span class="unit">户</span></div>
      </div>
      <div class="board-item" @click="openPeopleDetail('WJZW', info.WJZW_VALUE, '')">
        <div>沃家组网</div>
        <div class="value">{{ info.WJZW_VALUE || 0}}<span class="unit">户</span></div>
      </div>
      <div class="board-item" @click="openPeopleDetail('WJSY', info.WJSY_VALUE, '')">
        <div>沃家神眼</div>
        <div class="value">{{ info.WJSY_VALUE || 0}}<span class="unit">户</span></div>
      </div>
      <div class="board-item" @click="openPeopleDetail('IPTV', info.IPTV_VALUE, '')">
        <div>IPTV</div>
        <div class="value">{{ info.IPTV_VALUE || 0}}<span class="unit">户</span></div>
      </div>
    </div>
    <!-- 交付 -->
    <board-title title="交付" bgclass="bg-jf">
      <img slot="flagImg" class="flag-img" src="~@/assets/imgs/publicline/board/flag_jf.png" />
    </board-title>
    <div class="board-info jf" @click="openZyx">
      <div class="board-item">
        <div class="title"><img src="~@/assets/imgs/publicline/board/icon-zj.png" />装机</div>
        <div class="sub-title">完成/在途</div>
        <div class="value">{{ info.JF_ZJWC_VALUE || 0 }}/{{ info.JF_ZJZT_VALUE || 0}}<span class="unit">户</span></div>
      </div>
      <div class="board-item">
        <div class="title"><img src="~@/assets/imgs/publicline/board/icon-yj.png" />移机</div>
        <div class="sub-title">完成/在途</div>
        <div class="value">{{ info.JF_YJWC_VALUE || 0 }}/{{ info.JF_YJZT_VALUE || 0}}<span class="unit">户</span></div>
      </div>
      <div class="board-item">
        <div class="title"><img src="~@/assets/imgs/publicline/board/icon-xz.png" />修障</div>
        <div class="sub-title">完成/在途</div>
        <div class="value">{{ info.JF_XZWC_VALUE || 0 }}/{{ info.JF_XZZT_VALUE || 0}}<span class="unit">户</span></div>
      </div>
    </div>
  </div>
</template>

<script>
import boardTitle from '@/views/components/publicline/board/title.vue'

import { kpiEvening } from '@/api/publicline/board.js'

export default {
  components: { boardTitle },
  data() {
    return {
      info: {}
    }
  },
  mounted() {
    this.getKpiEvening()
  },
  methods: {
    // 指标
    async getKpiEvening() {
      const res = await kpiEvening({ townNo: this.$dataPermission })
      const { result, success } = res
      if (success) {
        this.info = result[0] || {}
      }
    },
    openPeopleDetail(type, value = 0, mvalue = 0) {
      this.$open.call(this, '/publicline/board/personal',
        {
          realTime: this.info.INSERT_DATE || '',
          type: type,
          flag: 'evening',
          value, mvalue,
        }
      )
    },
    openZyx() {
      this.$open.call(this, '/publicline/monitor-list',
        {
          type: 'zyx'
        }
      )
    }
  }
}
</script>
<style lang="less" scoped>
.morning-container {
  .morning-btn {
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .btn-time {
      font-size: 12px;
      color: #666;
    }
  }
  // .board-content {
  //   margin-bottom: 12px;
  // }
  .board-info {
    background: #fff;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    &.fz .board-item {
      background-image: url('~@/assets/imgs/publicline/board/bg-card-fz.png');
      .value {
        color: #4D98FF;
      }
    }
    &.wx .board-item {
      width: 33%;
      .value {
        color: #41C2BF;
      }
      &.bg1 {
        background-image: url('~@/assets/imgs/publicline/board/bg-card-wx-5gqz.png');
      }
      &.bg2 {
        background-image: url('~@/assets/imgs/publicline/board/bg-card-wx-5gsjb.png');
      }
      &.bg3 {
        background-image: url('~@/assets/imgs/publicline/board/bg-card-wx-kdtsb.png');
      }
    }
    &.zj .board-item {
      width: 49%;
      .value {
        color: #FD806E;
      }
      &.bg1 {
      background-image: url('~@/assets/imgs/publicline/board/bg-card-zj-wjgh.png');
      }
      &.bg2 {
        background-image: url('~@/assets/imgs/publicline/board/bg-card-zj-wjzw.png');
      }
      &.bg3 {
        background-image: url('~@/assets/imgs/publicline/board/bg-card-zj-wjsy.png');
      }
      &.bg4 {
        background-image: url('~@/assets/imgs/publicline/board/bg-card-zj-iptv.png');
      }
    }
    &.jf .board-item {
      background: #FCFBFA;
      width: 32%;
      .title {
        img {
          width: 14px;
          margin-right: 6px;
        }
      }
      .value {
        color: #FFAB4D;
      }
    }
    .board-item {
      width: 50%;
      text-align: center;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      padding: 16px 0;
      display: inline-block;
      margin-bottom: 12px;
      .sub-title {
        font-size: 12px;
        color: #666;
        margin-top: 6px;
      }
      .value {
        font-size: 24px;
        margin-top: 3px;
        margin-bottom: 6px;
      }
      .unit {
        font-size: 14px;
      } 
    }
  }
}
</style>